<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <!-- 校区 -->
        <el-select
          v-model="listQuery.orgId"
          placeholder="校区"
          clearable
          style="width: 180px"
          class="filter-item1"
          @change="handleOrgIdChange"
        >
          <el-option
            v-for="option in orgIdOptions"
            :key="option.key"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <!-- 渠道类型 -->
        <el-select
          v-model="listQuery.channelTypeId"
          placeholder="渠道类型"
          clearable
          style="width: 180px"
          class="filter-item1"
          @change="handleChannelTypeIdChange"
        >
          <el-option
            v-for="option in channelTypeIdOptions"
            :key="option.key"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <!-- 渠道 -->
        <el-select
          v-model="listQuery.channelId"
          placeholder="渠道"
          clearable
          style="width: 180px"
          class="filter-item1"
        >
          <el-option
            v-for="option in channelIdOptions"
            :key="option.key"
            :label="option.label"
            :value="option.value"
          />
        </el-select>

        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >{{ $t("table.search") }}</el-button>
        <el-button
          v-waves
          :loading="downloadLoading"
          v-permission="['business:export']"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          @click="handleDownload"
        >{{ $t('table.export') }}</el-button>

        <el-button type="text" @click="toggleMoreFilters()">
          {{ this.toggleBtnText }}
          <i v-if="this.toggleBtnText !== '展开' "
             class="el-select__caret el-input__icon el-icon-arrow-up is-reverse"
          ></i>

          <i v-else
             class="el-select__caret el-input__icon el-icon-arrow-down is-reverse"
          ></i>
        </el-button></el-row>
      <el-row :style="displayMoreFilters">
				<el-select
				  v-model="listQuery.departmentId"
				  placeholder="科系"
				  clearable
				  style="width: 180px"
				  class="filter-item1"

				>
				  <el-option
				    v-for="option in departmentIdOptions"
				    :key="option.key"
				    :label="option.label"
				    :value="option.value"
				  />
				</el-select>

        <!-- 咨询 日期 -->
        <el-date-picker
          v-model="listQuery.queryStartDate"
          align="right"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 180px"
        ></el-date-picker>
        <el-date-picker
          v-model="listQuery.queryEndDate"
          style="width: 180px"
          align="right"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
        ></el-date-picker>

      </el-row>
    </div>
<el-alert

						  title=""
						  type="info"
						  description="温馨提示:默认显示本月数据"
						  >
						</el-alert>
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="校区" align="center" width="165">
        <template slot-scope="scope">
          <span>{{ scope.row.statOrganizationName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到访数" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statVisitNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交数" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statEnrollNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="转化率" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statConversionRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平均跟进次数（次）" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statAverageFollowNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平均签单价（元）" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statAverageEnrollNum }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
  import { fetchOrg, fetchChannel, fetchCourse } from "@/api/clue"
  import {
    fetchCampusVisitRateCon,
    fetchExportCampusVisitRateCon,

  } from "@/api/statistics"
  import waves from "@/directive/waves" //  水波纹指令
  import Pagination from "@/components/Pagination" //  Secondary package based on el-pagination
  import { parseTime } from "@/utils";
import permission from "@/directive/permission/index.js"; // 权限判断指令

  export default {
    name: "campusVisitCon",
    components: { Pagination },
    directives: {
      waves,
    permission
    },
    data() {
      return {
        orgIdOptions: [], // 校区
        channelTypeIdOptions: [], // 渠道类型
        channelIdOptions: [], // 渠道
        departmentIdOptions: [], // 科系
        courseOptions: [], // 课程
        ownerIdOptions: [], // 咨询师
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          current: 1,
          size: 20,
          // 渠道类型
          channelTypeId: '',
          // 渠道
          channelId: '',
          // 校区
          orgId: '',
					departmentId: '',
          queryStartDate: "",
          queryEndDate: "",
        },
        downloadLoading: false,
        //是否展示更多的过滤条件
        displayMoreFilters: "display:none",
        toggleBtnText: "展开",
      }
    },
    created() {
      this.getList()
      this.getOrgIdOptions()
    },
    methods: {
      getList() {
        this.listLoading = true
        fetchCampusVisitRateCon(this.listQuery).then(response => {
          this.list = response.data
          this.total = response.count
          this.listLoading = false
        })
      },
      handleFilter() {
        this.listQuery.current = 1
        this.getList()
      },
      //  所有的获取下拉框数据方法
      //  获取所有校区()
      getOrgIdOptions() {
        const queryMethod = "queryClueOrStatistic"
        fetchOrg(queryMethod).then(response => {
          this.orgIdOptions = response.data
        })
      },
      // 根据校区获取所有渠道类型(校区ID)
      getChannelTypeOptions(queryId, queryKey) {
        fetchChannel(queryId, "0").then(response => {
          this.channelTypeIdOptions = response.data
        })
      },
      // 根据渠道ID获取对应的渠道(校区ID)
      getChannelOptions(queryId, queryKey) {
        fetchChannel(queryId, "1").then(response => {
          this.channelIdOptions = response.data
        })
      },
//科系（校区Id）
    getDepartmentIdOptions(queryId, queryKey) {
      fetchCourse(queryId, "0").then(response => {
        this.departmentIdOptions = response.data;
      });
    },
      // 所有change事件
      // 校区变化（重置渠道类型、渠道、科系、课程、咨询师）
      handleOrgIdChange(orgId) {
        this.listQuery.channelTypeId = ''
        this.listQuery.channelId = ''
      this.listQuery.departmentId = "";


        this.getChannelTypeOptions(orgId)
      this.getDepartmentIdOptions(orgId);


        this.channelIdOptions = null

      },
      // 渠道类型变化（重置渠道）
      handleChannelTypeIdChange(channelTypeId) {
        this.listQuery.channelId = ''
        this.getChannelOptions(channelTypeId)
      },

      handleDownload() {
        this.downloadLoading = true;
        fetchExportCampusVisitRateCon(this.listQuery).then(response => {
          const exportList = response.data;
          import("@/vendor/Export2Excel").then(excel => {
            const tHeader = [
              "校区",
              "到访数",
              "成交数",
              "转化率",
              "平均跟进次数",
              "平均签单价"
            ];
            const filterVal = [
              "statOrganizationName",
              "statVisitNum",
              "statEnrollNum",
              "statConversionRate",
              "statAverageFollowNum",
              "statAverageEnrollNum"
            ];
            const data = this.formatJson(filterVal, exportList);
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: "校区到访转成交率"
            });
            this.downloadLoading = false;
          });
        });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v =>
          filterVal.map(j => {
            if (j === "createTime") {
              return parseTime(v[j]);
            } else {
              return v[j];
            }
          })
        );
      },
      toggleMoreFilters() {
        if (this.displayMoreFilters === "display:none") {
          this.displayMoreFilters = "";
          this.toggleBtnText = "收起";
        } else {
          this.displayMoreFilters = "display:none";
          this.toggleBtnText = "展开";
        }
      }
    }
  }
</script>

